<script setup>
defineProps({
  data: Object,
  onTopicClick: Function,
})
</script>

<template>
  <div class="py-4 shadow-lg p-2 rounded-lg w-[240px] max-h-[400px] overflow-y-auto">
    <div class="text-sm pl-2">我的主题</div>
    <div v-for="page in data" :key="page.id">
      <div
        v-for="(item, index) in page[0]?.data"
        @click="onTopicClick(item.id, item.topicName, item.coverImage)"
        class="cursor-pointer hover:bg-slate-100 p-2 py-1 flex items-center gap-2"
        :key="item.id">
        <img :src="item.coverImage" class="w-10 h-10 object-cover rounded-full" alt="" />
        <div>
          <div class="text-sm">{{ item.topicName }}</div>
          <div class="text-xs text-slate-500">{{ item.userCount }}版友</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
